<%@page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <%--    <link href="../css/register.css" rel="stylesheet">--%>
    <style>
        /* 全局样式重置 */
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }

        a,
        img {
            border: 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        /* body背景相关 */
        body {
            background-color: #444444;
            background-image: url("../imgs/reg_bg_min.jpg");
            text-align: center;
        }

        /* 注册内容区域样式 */
        .reg-content {
            padding: 30px;
            margin: 3px;
        }

        /* 重置浮动相关样式 */
        .clear {
            clear: both;
        }

        .clear:before,
        .clear:after {
            content: "";
            display: table;
        }

        .clear:after {
            clear: both;
        }

        /* 表单主体样式，修改了margin实现水平居中 */
        .form-div {
            background-color: rgba(255, 255, 255, 0.27);
            border-radius: 10px;
            border: 1px solid #aaa;
            width: 424px;
            margin: 150px auto;
            padding: 30px 0 20px 0px;
            font-size: 16px;
            box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);
            text-align: left;
        }

        /* 表单内各类输入框通用样式，减小输入框之间的间隔 */
        .form-div input[type="text"],
        .form-div input[type="password"],
        .form-div input[type="email"] {
            width: 268px;
            margin: 5px; /* 减小外边距，让输入框之间距离更近 */
            line-height: 20px;
            font-size: 16px;
        }

        .form-div input[type="checkbox"] {
            margin: 15px 0 15px 10px; /* 适当减小上下外边距 */
        }

        .form-div input[type="button"],
        .form-div input[type="submit"],
        .form-div input[type="reset"] { /* 新增对reset按钮的样式统一处理 */
            margin: 10px 20px 0 0;
        }

        /* 表单内表格样式，调整文本对齐为居中，文字颜色调深 */
        .form-div table {
            margin: 0 auto;
            text-align: center;
            color: rgba(30, 30, 30, 1.00); /* 文字颜色调深 */
        }

        .form-div table img {
            vertical-align: middle;
            margin: 0 0 5px 0;
        }

        /* 页脚样式，文字颜色调深 */
        .footer {
            color: rgba(30, 30, 30, 1.00);
            font-size: 12px;
            margin-top: 30px;
        }

        /* 按钮所在区域样式，去掉float让按钮能更好居中 */
        .form-div.buttons {
            text-align: center;
        }

        /* 各类输入框样式 */
        input[type="text"],
        input[type="password"],
        input[type="email"] {
            border-radius: 8px;
            box-shadow: inset 0 2px 5px #eee;
            padding: 10px;
            border: 1px solid #D4D4D4;
            color: #333333;
            margin-top: 5px;
        }

        input[type="text"]:focus,
        input[type="password"]:focus,
        input[type="email"]:focus {
            border: 1px solid #50afeb;
            outline: none;
        }

        input[type="button"],
        input[type="submit"],
        input[type="reset"] { /* 新增对reset按钮的样式统一处理 */
            padding: 7px 15px;
            background-color: #3c6db0;
            text-align: center;
            border-radius: 5px;
            overflow: hidden;
            min-width: 80px;
            border: none;
            color: #FFF;
            box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
        }

        input[type="button"]:hover,
        input[type="submit"]:hover,
        input[type="reset"]:hover { /* 新增对reset按钮的悬停样式处理 */
            background-color: #5a88c8;
        }

        input[type="button"]:active,
        input[type="submit"]:active,
        input[type="reset"]:active { /* 新增对reset按钮的激活样式处理 */
            background-color: #5a88c8;
        }

        /* 错误提示信息样式 */
        .err_msg {
            color: red;
            padding-right: 170px;
        }

        #password_err,
        #tel_err {
            padding-right: 195px;
        }

        /* 注册按钮样式，调整使其水平居中 */
        #reg_btn {
            display: block;
            margin: 20px auto;
            width: 285px;
            height: 45px;
        }

        #reg_ret {
            display: block;
            margin: 20px auto;
            width: 285px;
            height: 45px;
        }

        #checkCode {
            width: 100px;
        }

        #changeImg {
            color: aqua;
        }

        /* 表格内单元格样式，确保内容水平和垂直居中，减小高度让行更紧凑 */
        th {
            padding: 0;
            height: 60px; /* 减小高度值，让表格行更紧凑 */
            text-align: center;
            vertical-align: middle;
        }

        td {
            padding: 0 0 0 10px;
            height: 60px; /* 减小高度值，让表格行更紧凑 */
            text-align: center;
            vertical-align: middle;
        }

        /* 针对名为year的select元素的样式，结合了.form-div选择器提高特异性 */
        /* 针对名为year的select元素的样式，结合了.form-div选择器提高特异性 */
        .form-div select[name="year"] {
            border-radius: 5px;
            border-style: hidden;
            background-color: rgba(216, 191, 216, 0.5);
            outline: none;
            color: #0e021b;
            padding-left: 10px;
            height: 35px; /* 适当增加高度 */
            width: 120px; /* 增加宽度 */
            margin-left: 15px;
        }

        a {
            text-decoration: none;
        }

        /* 针对名为mouth的select元素的样式，结合了.form-div选择器提高特异性 */
        .form-div select[name="mouth"] {
            border-radius: 5px;
            border-style: hidden;
            background-color: rgba(255, 200, 200, 0.5); /* 示例，可以换不同颜色来区分 */
            outline: none;
            color: #110220;
            padding-left: 10px;
            height: 35px; /* 适当增加高度 */
            width: 80px; /* 增加宽度 */
            margin-left: 15px;
        }

        /* 针对名为day的select元素的样式，结合了.form-div选择器提高特异性 */
        .form-div select[name="day"] {
            border-radius: 5px;
            border-style: hidden;
            background-color: rgba(200, 255, 200, 0.5); /* 示例，可以换不同颜色来区分 */
            outline: none;
            color: #0a0113;
            padding-left: 10px;
            height: 35px; /* 适当增加高度 */
            width: 80px; /* 增加宽度 */
            margin-left: 15px;
        }

        /* 针对名为edu的select元素的样式，结合了.form-div选择器提高特异性 */
        .form-div select[name="edu"] {
            border-radius: 5px;
            border-style: hidden;
            background-color: rgba(200, 200, 255, 0.5); /* 示例，可以换不同颜色来区分 */
            outline: none;
            color: #120322;
            padding-left: 10px;
            height: 35px; /* 适当增加高度 */
            width: 100px; /* 增加宽度 */
            margin-left: 15px;
        }

        /* 针对名为work的select元素的样式，结合了.form-div选择器提高特异性 */
        .form-div select[name="work"] {
            border-radius: 5px;
            border-style: hidden;
            background-color: rgba(255, 200, 255, 0.5); /* 示例，可以换不同颜色来区分 */
            outline: none;
            color: #0d0217;
            padding-left: 10px;
            height: 35px; /* 适当增加高度 */
            width: 120px; /* 增加宽度 */
            margin-left: 15px;
        }

        /* 针对名为place的select元素的样式，结合了.form-div选择器提高特异性 */
        .form-div select[name="place"] {
            border-radius: 5px;
            border-style: hidden;
            background-color: rgba(200, 255, 255, 0.5); /* 示例，可以换不同颜色来区分 */
            outline: none;
            color: #0b0213;
            padding-left: 10px;
            height: 35px; /* 适当增加高度 */
            width: 150px; /* 增加宽度 */
            margin-left: 15px;
        }

        #loginMsg {
            text-align: center;
            color: aliceblue;
        }
    </style>
</head>

<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <a href="../login.jsp"><span id="loginMsg">已有帐号？点击登录</span></a>
    </div>
    <form id="reg-form" action="http://localhost/RegisterController/register" method="post" accept-charset="UTF-8">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <div id="username_error_msg" class="error_msg" style="color: red; display: none;"></div>
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>
            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password1" type="password" id="password">
                    <div id="password_error_msg" class="error_msg" style="color: red; display: none;"></div>
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>

            <tr>
                <td>
                    重复密码
                </td>
                <td>
                    <input type="password" name="password2" size="22"/>
                    <div id="password2_error_msg" class="error_msg" style="color: red; display: none;"></div>
                </td>
            </tr>

            <tr>
                <td>
                    用户姓名
                </td>
                <td>
                    <input type="text" name="name" size="20"/>
                </td>
            </tr>

            <tr>
                <td>
                    用户性别
                </td>
                <td>
                    <label>
                        <input type="radio" name="sex" value="男" checked>
                        男
                    </label>
                    <label>
                        <input type="radio" name="sex" value="女">
                        女
                    </label>
                </td>
            </tr>

            <tr>
                <td>
                    出生日期
                </td>
                <td>
                    <label>
                        <select name="year" size="1">
                            <option value="1978">1978</option>
                            <option value="1979">1979</option>
                            <option value="1980">1980</option>
                            <option value="1981">1981</option>
                            <option value="1982">1982</option>
                            <option value="1983">1983</option>
                            <option value="1984">1984</option>
                            <option value="1985">1985</option>
                            <option value="1986">1986</option>
                            <option value="1987">1987</option>
                            <option value="1988">1988</option>
                            <option value="1989">1989</option>
                            <option value="1990">1990</option>
                            <option value="1991">1991</option>
                            <option value="1992">1992</option>
                            <option value="1993">1993</option>
                            <option value="1994">1994</option>
                            <option value="1995">1995</option>
                            <option value="1996">1996</option>
                            <option value="1997">1997</option>
                            <option value="1998">1998</option>
                        </select>
                        年
                    </label>
                    <select name="mouth" size="1">
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                        <option value="05">05</option>
                        <option value="06">06</option>
                        <option value="07">07</option>
                        <option value="08">08</option>
                        <option value="09">09</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                    </select>月
                    <select name="day" size="1">
                        <option value="01">01</option>
                        <option value="02">02</option>
                        <option value="03">03</option>
                        <option value="04">04</option>
                        <option value="05">05</option>
                        <option value="06">06</option>
                        <option value="07">07</option>
                        <option value="08">08</option>
                        <option value="09">09</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                        <option value="31">31</option>
                    </select>日
                </td>
            </tr>

            <tr>
                <td>
                    用户民族
                </td>
                <td>
                    <input type="radio" name="nation" value="汉族" checked>汉族
                    <input type="radio" name="nation" value="回族">回族
                    <input type="radio" name="nation" value="壮族">壮族
                    <input type="radio" name="nation" value="其它">其它
                </td>
            </tr>

            <tr>
                <td>
                    用户学历
                </td>
                <td>
                    <select name="edu" size="1">
                        <option value="博士">博士</option>
                        <option value="硕士">硕士</option>
                        <option value="本科">本科</option>
                        <option value="专科">专科</option>
                        <option value="高中">高中</option>
                        <option value="初中">初中</option>
                        <option value="小学">小学</option>
                        <option value="其它">其它</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>
                    用户类型
                </td>
                <td>
                    <select name="work" size="1">
                        <option value="软件开发工程师">软件开发工程师</option>
                        <option value="软件测试工程师">软件测试工程师</option>
                        <option value="教师">教师</option>
                        <option value="学生">学生</option>
                        <option value="经理">经理</option>
                        <option value="职员">职员</option>
                        <option value="老板">老板</option>
                        <option value="公务员">公务员</option>
                        <option value="其它">其它</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>
                    用户电话
                </td>
                <td>
                    <input type="text" name="phone" size="20"/>
                    <div id="phone_error_msg" class="error_msg" style="color: red; display: none;"></div>
                </td>
            </tr>

            <tr>
                <td>
                    家庭住址
                </td>
                <td>
                    <select name="place" size="1">
                        <option value="北京">北 京</option>
                        <option value="上海">上 海</option>
                        <option value="天津">天 津</option>
                        <option value="河北">河 北</option>
                        <option value="河南">河 南</option>
                        <option value="吉林">吉 林</option>
                        <option value="黑龙江">黑龙江</option>
                        <option value="内蒙古">内蒙古</option>
                        <option value="山东">山 东</option>
                        <option value="山西">山 西</option>
                        <option value="陕西">陕 西</option>
                        <option value="甘肃">甘 肃</option>
                        <option value="宁夏">宁 夏</option>
                        <option value="青海">青 海</option>
                        <option value="新疆">新 疆</option>
                        <option value="辽宁">辽 宁</option>
                        <option value="江苏">江 苏</option>
                        <option value="浙江">浙 江</option>
                        <option value="安徽">安 微</option>
                        <option value="广东">广 东</option>
                        <option value="海南">海 南</option>
                        <option value="广西">广 西</option>
                        <option value="云南">云 南</option>
                        <option value="贵州">贵 州</option>
                        <option value="四川">四 川</option>
                        <option value="重庆">重 庆</option>
                        <option value="西藏">西 藏</option>
                        <option value="香港">香 港</option>
                        <option value="澳门">澳 门</option>
                        <option value="福建">福 建</option>
                        <option value="江西">江 西</option>
                        <option value="湖南">湖 南</option>
                        <option value="青海">青 海</option>
                        <option value="湖北">湖 北</option>
                        <option value="台湾">台 湾</option>
                        <option value="其它">其 它</option>
                    </select>省(直辖市)
                </td>
            </tr>

            <tr>
                <td>
                    邮箱地址
                </td>
                <td>
                    <input type="text" name="email" size="20"/>
                    <div id="email_error_msg" class="error_msg" style="color: red; display: none;"></div>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
            <input value="重 置" type="reset" id="reg_ret">
        </div>
        <br class="clear">
    </form>
</div>

<script>
    // 校验用户名，6-12位数字加字符，增加验证用户名是否已存在的逻辑（通过Ajax请求后端）
    function checkUsername() {
        return new Promise((resolve, reject) => {
            var username = $("#username").val();
            var usernameErrorMsg = $("#username_error_msg");
            if (username.length < 6 || username.length > 12) {
                usernameErrorMsg.text("用户名长度需在6-12位之间").show();
                reject(false);
            }
            // 这里可以添加更复杂的正则表达式校验是否是数字加字符等情况，简单示例如下（仅判断有数字和字母）
            var pattern = /^(?=.*[a-zA-Z])(?=.*\d).+$/;
            if (!pattern.test(username)) {
                usernameErrorMsg.text("用户名需包含数字和字符").show();
                reject(false);
            }

            // 通过Ajax请求后端验证用户名是否存在
            $.ajax({
                url: "http://localhost/RegisterController/checkUsername",  // 假设后端添加一个验证用户名是否存在的接口，这里需对应修改URL
                type: "POST",
                data: {username: username},
                success: function (response) {
                    if (response.exists) {
                        usernameErrorMsg.text("用户名已存在").show();
                        reject(false);
                    } else {
                        usernameErrorMsg.hide();
                        resolve(true);
                    }
                },
                error: function () {
                    alert("验证用户名是否存在时出现错误，请稍后再试");
                    reject(false);
                }
            });
        });
    }

    // 校验登录密码，6-12位数字加字符
    function checkPassword() {
        var password = $("#password").val();
        var passwordErrorMsg = $("#password_error_msg");
        if (password.length < 6 || password.length > 12) {
            passwordErrorMsg.text("密码长度需在6-12位之间").show();
            return false;
        }
        var pattern = /^(?=.*[a-zA-Z])(?=.*\d).+$/;
        if (!pattern.test(password)) {
            passwordErrorMsg.text("密码需包含数字和字符").show();
            return false;
        }
        passwordErrorMsg.hide();
        return true;
    }

    // 校验重复密码与登录密码一致
    function checkPassword2() {
        var password1 = $("#password").val();
        var password2 = $("input[name='password2']").val();
        var password2ErrorMsg = $("#password2_error_msg");
        if (password1 !== password2) {
            password2ErrorMsg.text("两次密码不一致").show();
            return false;
        }
        password2ErrorMsg.hide();
        return true;
    }

    // 校验用户电话格式（简单示例，可根据实际更严格的格式调整正则表达式）
    function checkPhone() {
        var phone = $("input[name='phone']").val();
        var phoneErrorMsg = $("#phone_error_msg");
        var pattern = /^1[3-9]\d{9}$/;
        if (!pattern.test(phone)) {
            phoneErrorMsg.text("请输入正确的手机号码格式").show();
            return false;
        }
        phoneErrorMsg.hide();
        return true;
    }

    // 校验邮箱地址格式（简单示例，可根据更严格要求调整正则）
    function checkEmail() {
        var email = $("input[name='email']").val();
        var emailErrorMsg = $("#email_error_msg");
        var pattern = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (!pattern.test(email)) {
            emailErrorMsg.text("请输入正确的邮箱地址格式").show();
            return false;
        }
        emailErrorMsg.hide();
        return true;
    }

    // 为输入框绑定输入事件，实时校验
    $(document).ready(function () {
        $("#username").on("input", function () {
            checkUsername().catch(() => {
            });  // 捕获Promise的拒绝情况，避免报错影响其他逻辑，这里简单处理，可根据实际完善错误处理
        });
        $("#password").on("input", checkPassword);
        $("input[name='password2']").on("input", checkPassword2);
        $("input[name='phone']").on("input", checkPhone);
        $("input[name='email']").on("input", checkEmail);
    });

    $(document).ready(function () {
        $("#reg_btn").on("click", async function (e) {
            try {
                const isUsernameValid = await checkUsername();
                const isPasswordValid = checkPassword();
                const isPassword2Valid = checkPassword2();
                const isPhoneValid = checkPhone();
                const isEmailValid = checkEmail();
                if (!isUsernameValid || !isPasswordValid || !isPassword2Valid || !isPhoneValid || !isEmailValid) {
                    e.preventDefault();
                }
            } catch (error) {
                // 处理异常情况，比如记录日志等，这里简单阻止表单提交
                e.preventDefault();
            }
        });
    });
</script>
</body>
</html>